<template>
  <div class="settings-page">
    <!-- 导航栏 -->
    <van-nav-bar
      title="设置"
      left-arrow
      @click-left="onClickLeft"
    />

    <!-- 设置列表 -->
    <div class="settings-list">
      <van-cell-group title="账号设置">
        <van-cell 
          title="个人信息" 
          is-link
          @click="$router.push('/user-info')"
        />
      </van-cell-group>

      <van-cell-group title="收货地址">
        <van-cell 
          title="我的地址" 
          is-link
          @click="$router.push('/address')"
        />
      </van-cell-group>

      <van-cell-group title="关于平台">
        <van-cell 
          title="用户协议" 
          is-link
          @click="handleAgreement('user')"
        />
        <van-cell 
          title="隐私政策" 
          is-link
          @click="handleAgreement('privacy')"
        />
        <van-cell 
          title="关于我们" 
          is-link
          @click="handleAbout"
        />
      </van-cell-group>
    </div>

    <!-- 退出登录按钮 -->
    <div class="logout-btn">
      <van-button block type="danger" @click="showLogoutConfirm">退出登录</van-button>
    </div>

    <!-- 协议和关于弹窗 -->
    <van-popup
      v-model:show="showAgreement"
      position="right"
      :style="{ width: '100%', height: '100%' }"
    >
      <div class="agreement-content">
        <van-nav-bar
          :title="agreementTitle"
          left-arrow
          @click-left="showAgreement = false"
        />
        <div class="agreement-body" v-html="agreementContent"></div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showDialog } from 'vant'

const router = useRouter()
const showAgreement = ref(false)
const agreementTitle = ref('')
const agreementContent = ref('')

// 处理协议展示
const handleAgreement = (type) => {
  showAgreement.value = true
  if (type === 'user') {
    agreementTitle.value = '用户协议'
    agreementContent.value = '这里是用户协议内容...' // TODO: 替换为实际内容
  } else {
    agreementTitle.value = '隐私政策'
    agreementContent.value = '这里是隐私政策内容...' // TODO: 替换为实际内容
  }
}

// 处理关于我们
const handleAbout = () => {
  showAgreement.value = true
  agreementTitle.value = '关于我们'
  agreementContent.value = '这里是关于我们的内容...' // TODO: 替换为实际内容
}

const onClickLeft = () => {
  router.back()
}

// 退出登录确认
const showLogoutConfirm = () => {
  showDialog({
    title: '提示',
    message: '确定要退出登录吗？',
    showCancelButton: true,
  }).then(() => {
    // 确认退出
    sessionStorage.clear()
    router.replace('/')
  })
}
</script>

<style scoped>
.settings-page {
  min-height: 100vh;
  background: #f7f8fa;
}

.settings-list {
  margin-top: 12px;
}

.logout-btn {
  margin: 20px 16px;
}

.agreement-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.agreement-body {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}
</style> 